<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="shortcut icon" href="" />
    <link rel="icon" href="" type="image/png" />
    <title>房地产开发与管理</title>
    <link href="css/normalize.min.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <link rel="stylesheet" href="css/fullpage.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="app" v-cloak>
      <div id="fullpage">
        <!--头部导航栏-->
        <div class="section" data-anchor="header">
          <header>
            <div class="logo">
              <img src="./images/logo.png" alt="" />
              <span>{{title}}</span>
            </div>

            <nav class="menu-container">
              <ul class="wrapper">
                <li><a href="./course_overview.html">学院简介</a></li>
                <li class="on"><a href="./redm.html">房地产开发与管理</a></li>
                <li><a href="./course_map.html">课程地图</a></li>
              </ul>
            </nav>
          </header>
        </div>
        <!--//头部导航栏-->
        <div class="section section-box jianjie" data-anchor="jianjie">
          <div class="wrapper">
            <div class="tit-group">
              <i class="icon-jianjie"></i>
              <span>简介</span>
            </div>

            <div class="content">{{pro_info}}</div>
          </div>
        </div>
        <div class="section section-box mubiao" data-anchor="mubiao">
          <div class="wrapper">
            <div class="tit-group">
              <i class="icon-mubiao"></i>
              <span>培养目标</span>
            </div>

            <div class="content">
              <el-table :data="pro_goal" border stripe style="width: 100%">
                <el-table-column align="center" header-align="center" prop="sort" label="序号" width="100">
                </el-table-column>
                <el-table-column header-align="center" prop="pro_goal_content" label="培养目标内容"> </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="section section-box yaoqiu" data-anchor="yaoqiu">
          <div class="wrapper">
            <div class="tit-group">
              <i class="icon-yaoqiu"></i>
              <span>毕业要求</span>
            </div>

            <div class="content">
              <el-table
                :data="lists"
                :span-method="objectSpanMethod"
                border
                stripe
                style="width: 100%"
                max-height="600px">
                <el-table-column align="center" header-align="center" prop="index" label="序号" width="70">
                </el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  prop="pro_group.pro_gr_content"
                  label="毕业要求"
                  width="120">
                </el-table-column>
                <el-table-column align="center" header-align="center" label="分解指标点">
                  <el-table-column align="center" header-align="center" prop="subIndex" label="子序号" width="100">
                  </el-table-column>
                  <el-table-column header-align="center" prop="pro_gr_decomposition_content" label="指标点">
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" header-align="center" prop="courseNames" label="课程关联">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="section section-box guanxi" data-anchor="guanxi">
          <div class="wrapper">
            <div class="tit-group">
              <i class="icon-guanxi"></i>
              <span>支撑关系</span>
            </div>

            <div class="content">
              <el-table :data="relations" border stripe style="width: 100%" max-height="600px">
                <el-table-column
                  align="center"
                  header-align="center"
                  width="200px"
                  prop="name"
                  label="毕业要求"
                  width="100">
                </el-table-column>
                <template v-for="item in pro_goal" :key="item.key">
                  <el-table-column align="center" header-align="center" :prop="item.key" :label="item.sort">
                    <template #default="{row}">
                      <i class="el-icon-check" v-if="row[item.key]"></i>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
        </div>

        <!--底部-->
        <div class="section" data-anchor="footer">
          <footer>
            <div class="wrapper">
              <div class="copyright">管理科学与房地产学院 版权所有</div>
              <div class="tip">建议使用IE8及以上版本或其他高版本浏览器，屏幕分辨率在1366*768及以上的客户端访问</div>
            </div>
          </footer>
        </div>
        <!--//底部-->
      </div>
    </div>
  </body>

  <!--//底部-->
  <script src="./js/vue.min.js"></script>
  <script src="./js/lodash.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/fullpage.js"></script>
  <script>
    function getUrlParams(param) {
      const urlParams = new URLSearchParams(window.location.search)
      return urlParams.get(param) || ''
    }

    var app = new Vue({
      el: '#app',
      data() {
        return {
          info: {},
        }
      },
      computed: {
        id() {
          return getUrlParams('id')
        },
        title() {
          return _.get(this.info, 'acf.pro_college', '')
        },
        pro_info() {
          return _.get(this.info, 'acf.pro_info', '')
        },
        pro_goal() {
          return _.map(_.get(this.info, 'acf.pro_goal', []) || [], (vo, idx) => {
            return {
              ...vo,
              key: `mubiao${idx + 1}`,
              sort: `培养目标${idx + 1}`,
            }
          })
        },
        pro_gr() {
          return _.get(this.info, 'acf.pro_gr', []) || []
        },
        lists() {
          return _.flatMap(this.pro_gr, (item, idx) => {
            return _.map(item.pro_decomposition, (vo, cdx) => {
              return {
                ..._.omit(item, 'pro_decomposition'),
                ..._.omit(vo, 'pro_gr_course_ref'),
                courseNames: _.map(vo.pro_gr_course_ref, 'pro_gr_course_ref_course').join(','),
                rowspan: cdx === 0 ? item.pro_decomposition.length : 0,
                index: idx + 1,
                subIndex: `${idx + 1} - ${cdx + 1}`,
                colspan: cdx === 0 ? 1 : 0,
              }
            })
          })
        },
        relations() {
          return _.map(this.pro_gr, (vo) => {
            const mubiao = _.fromPairs(
              _.map(this.pro_goal, (item) => {
                return [item.key, vo.pro_goal_ref.includes(item.sort)]
              })
            )
            return {
              name: vo.pro_group.pro_gr_content,
              ...mubiao,
            }
          })
        },
      },
      mounted() {
        this.fetchData()
      },
      methods: {
        fetchData() {
          if (this.id) {
            fetch(`https://api.kejianxin.com/wp-json/wp/v2/profession/${this.id}`)
              .then((res) => {
                return res.json()
              })
              .then((data) => {
                this.info = data || {}
              })
          }
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex <= 1) {
            return {
              rowspan: row.rowspan,
              colspan: row.colspan,
            }
          }
        },
      },
    })

    new fullpage('#fullpage', {
      autoScrolling: true,
      navigation: true,
      scrollBar: true,
      scrollOverflow: true,
      navigation: false,
      dragAndMove: true,
      anchors: ['header', 'jianjie', 'mubiao', 'yaoqiu', 'guanxi', 'footer'],
    })
  </script>
</html>
